<template>
	<view class="container">
		<view class="header nav-header" :style="{backgroundImage:'url('+tui.website+'static/home/img/topbg4.png)',paddingTop:top+'px'}">
			<view class="page-title" style="color: #FFF;">
				<view class="back-btn">
					<tui-icon name="arrowleft" color="#fff" @click="back"></tui-icon>
				</view>
				<text>开单确认</text>
			</view>
		</view>
		<view :style="{marginTop:(49+top)+'px'}">
			<tui-list-cell :lineLeft="false">
				<view class="tui-item-box">
					<view class="tui-msg-box">
						<image :src="mem.avatar" class="tui-msg-pic" mode="widthFix"></image>
						<view class="tui-msg-item">
							<view class="tui-msg-name">
							{{mem.username}}<text style="font-size: 14px;padding-left: 10px;">({{mem.mobile}})</text>
							<image v-if="mem.group_id >0" :src="tui.website+'/static/images/icon/lv'+mem.group_id+'.png'" mode="widthFix" style="width: 30px;vertical-align: bottom;"></image>
							</view>
							<view class="tui-msg-content">会员编码：{{mem.UN}} <text style="padding-left: 20px;">余额：</text><text style="color: #FF0000;font-weight: 700;">￥{{mem.money}}</text></view>
						</view>
					</view>
				</view>
			</tui-list-cell>
		</view>
		<view class="mycard">
			<view class="" style="padding: 20upx 0 0 30upx;font-weight: 700;font-size: 32upx;">
				消费清单
			</view>
			<view class="tui-cart-cell" v-for="(item,index) in dataList" :key="index">
						<view class="tui-goods-item">
							<image :src="item.img" class="tui-goods-img"  mode="aspectFill"/>
							<view class="tui-goods-info">
								<view class="tui-goods-title">
									{{item.name}}
								</view>
								<view class="tui-goods-model">
									<!-- <view class="tui-model-text" v-if="mem.lv">折扣:{{mem.lv}}</view> -->
									<!-- <tui-icon name="arrowdown" :size="16" color="#333"></tui-icon> -->
								</view>
								<view class="tui-price-box">
									<view class="tui-goods-price">￥{{item.price}}</view>
									<tui-numberbox :value="item.buyNum" :height="36" :width="80" :min="1" :max="100000" :index="index" @change="changeNum"></tui-numberbox>
								</view>
							</view>
						</view>
			</view>
			<view style="text-align: right;padding-bottom: 20upx;padding-right: 30upx;font-size: 28upx;">
				<!-- 小计: <text style="color: #FF0000;">￥{{total_money}}</text> -->
				 <!-- <text style="text-decoration: line-through;color:#bbb;padding-left: 20upx;">￥{{oldTotalMoney}}</text> -->
				 </view>
		</view>
		<view class="mycard">
			<tui-list-cell @click="getLeaderList()" :arrow="true">
				<view class="tui-item-box">
					<text class="tui-list-cell_name">销售员工</text>
					<view class="tui-right">{{leader.nickname}}</view>
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" :unlined="true">
				<view class="tui-item-box" style="height: 30px;">
					<text class="tui-list-cell_name">补录订单</text>
					<view v-show="repOrderStatus" @click="showCalendarStatus" class="rep-order-date"><tui-icon margin="0 10px 0 0" name="calendar" :size="16"></tui-icon>{{dateString?dateString:'选择日期'}}</view>
					<view class="tui-right"><switch @change="changeRepStatus" style="zoom:0.6" color="#E41F19"/></view>
				</view>
			</tui-list-cell>
			<view class="rep-order-tip" v-show="repOrderStatus">
				<text>1.用于补开历史订单,补单后该笔订单的收将计入补录选择的时间。</text>
				<text>2.上月的订单必须在本月3号24点之前补录完成。</text>
			</view>
		</view>
		<!--tabbar-->
		<view class="tui-tabbar">
			<view class="tui-checkAll">
				<view style="width: 100%;color: #666;font-size: 14px;"><tui-icon name="cart" :size="19"></tui-icon>( {{dataList.length}}种商品，共{{buyNum}}件)</view>
				<view style="width: 100%;" class="tui-total-price" >共计:
					<text style="font-size: 10px;color: #FF0000;padding-left: 8px;">￥</text>
					<text class="tui-bold">{{total_money}}</text>
					<!-- <text class="line-text">￥{{oldTotalMoney}}</text> -->
				</view>
			</view>
			<view>
				<tui-button width="200rpx" height="80rpx" :size="30" type="danger" shape="circle"  @click="btnPay">收款</tui-button>
			</view>
		</view>
		<!-- 选择员工 -->
		<tui-bottom-popup :show="showLeaderStatus" :zIndex="9997" :radius="false" @close="hideLeader">
			<view class="leader-box">
				<view
					class="leader-txt"
					:class="[item.id == leader.id?'active':'']"
					v-for="(item, index) in LeaderLists"
					:key="index"
					:data-index="index"
					@tap.stop="chooseLeader(index)"
				>{{ item.nickname }}</view>
			</view>
		</tui-bottom-popup>
		<tui-datetime :type="2" ref="dateTime" @confirm="changeDate"></tui-datetime>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mid:0,//客户id组
				gids:'',//购物id组
				mem:{},//客户信息
				top:0,//顶部padding的高
				dis:1,//折扣
				oldTotalMoney:0,
				buyNum:1,
				leader:{
					nickname:'晓雪',
					id:4
				},
				LeaderLists:[],
				showLeaderStatus:false,
				repOrderStatus:false,
				dateString:"",
				dataList: [],
				actions: [
					{
						name: '删除',
						color: '#fff',
						fontsize: 28,
						width: 64,
						background: '#F82400'
					}
				],
			}
		},
		onLoad(opt) {
			this.mid = opt.mid;
			this.gids = opt.gids;
			this.param = opt.param;
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					this.width = obj.left || res.windowWidth;
					this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
					this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
					// this.scrollH = res.windowWidth * 0.6
				}
			})
		},
		onShow() {
			this.getMemberInfo();
			this.myinfo();
			this.getGoods();
		},
		computed:{
			total_money(){
				return (this.oldTotalMoney).toFixed(2);
			}
		},
		methods: {
			back(){
				uni.navigateBack();
			},
			myinfo(){
				this.tui.get('user/api/getuser').then(res=>{
					this.leader = res.data;
				})
			},getMemberInfo(){
				this.tui.get('user/api/getMem',{id:this.mid}).then(res=>{
					this.mem = res.data;
					this.dis = this.mem.dis;
				})
			},
			getGoods(){
				this.tui.get('user/api/cardlist',{gids:this.param}).then(res=>{
					this.dataList = res.data;
					this.buyNum = this.dataList.length;
					this.calcHandle();
				})
			},
			calcHandle() {
				let buyNum = 0;
				let totalPrice = 0;
				this.dataList.map((item) => {
					buyNum += (item.buyNum?item.buyNum:1);
					totalPrice += parseFloat(item.price) * (item.buyNum?item.buyNum:1);
					// console.log(totalPrice);
				})
				this.buyNum = buyNum
				this.oldTotalMoney = Math.floor(totalPrice,2)
			},
			changeNum: function(e) {
				// this.dataList[e.index].buyNum = e.value
				this.$set(this.dataList[e.index],'buyNum',e.value)
				setTimeout(() => {
					this.calcHandle()
				}, 0)
			},
			getLeaderList(){
				this.tui.get('user/api/listleader').then(res=>{
					this.LeaderLists = res.data;
					this.showLeaderStatus = true;
				})
			},
			hideLeader(){
				this.showLeaderStatus = false;
			},chooseLeader(idx){
				this.leader = this.LeaderLists[idx];
				this.showLeaderStatus =false;
			}
			,changeRepStatus(e){
				this.repOrderStatus = e.detail.value ;
			},
			showCalendarStatus(){
				this.$refs.dateTime.show();
			},
			changeDate(val){
				this.dateString = val.result;
			},btnPay(){
				let num=[];
				let gids=[];
				let day=this.repOrderStatus?this.dateString:0;
				this.dataList.map((item) => {
					num.push(item.buyNum?item.buyNum:1);
					gids.push(item.id);
				});
				let params={
					mid:this.mid,
					leader:this.leader.id,
					gids:gids.join(','),
					num:num.join(','),
					day:day,
					type:1
				};
				this.tui.post('user/api/intoorder',params).then(res=>{
					if(res.code){
						uni.navigateTo({
							url:'../confirm/confirm?osn='+res.data
						})
					}else{
						uni.showModal({
							title:"提醒",
							content:res.msg,
						})
					}
				})
			}
		}
	}
</script>

<style>
.container {
		padding-bottom: 120rpx;
	}
	.tui-msg-box {
		display: flex;
		align-items: center;
	}
	
	.tui-msg-pic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: block;
		margin-right: 24rpx;
		flex-shrink: 0;
	}
	
	.tui-msg-item {
		max-width: 500rpx;
		min-height: 80rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 34rpx;
		line-height: 1;
		color: #262b3a;
	}
	
	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 26rpx;
		line-height: 1;
		color: #9397a4;
	}
	
	.tui-msg-right {
		max-width: 120rpx;
		height: 88rpx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}
/**/
	.tui-mtop {
		margin-top: 24rpx;
	}

	.tui-edit-goods {
		width: 100%;
		border-radius: 12rpx;
		overflow: hidden;
		padding: 24rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333;
		font-size: 24rpx;
	}

	.tui-goods-num {
		font-weight: bold;
		color: #e41f19;
	}

	.tui-cart-cell {
		width: 100%;
		border-radius: 12rpx;
		background: #FFFFFF;
		padding: 40rpx 0;
		overflow: hidden;
	}

	.tui-goods-item {
		display: flex;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.tui-goods-img {
		width: 180rpx;
		height: 180rpx !important;
		border-radius: 12rpx;
		flex-shrink: 0;
		display: block;
	}
	
	.tui-goods-info {
		width: 100%;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		box-sizing: border-box;
		overflow: hidden;
		padding: 20rpx;
	}
	
	.tui-goods-title {
		white-space: normal;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 24rpx;
		color: #333;
	}
	
	.tui-goods-model {
		max-width: 100%;
		color: #333;
		background: #F5F5F5;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16rpx;
		box-sizing: border-box;
	}
	
	.tui-model-text {
		max-width: 100%;
		transform: scale(0.9);
		transform-origin: 0 center;
		font-size: 24rpx;
		line-height: 32rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.tui-price-box {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}
	
	.tui-goods-price {
		font-size: 28rpx;
		font-weight: 500;
		color: #e41f19;
		font-weight: 700;
	}
	
	.tui-scale {
		transform: scale(0.8);
		transform-origin: 100% 100%;
	}
	
	.tui-activity {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx 20rpx 100rpx;
		box-sizing: border-box;
	}
	
	.tui-buy {
		display: flex;
		align-items: center
	}
	
	.tui-bold {
		font-weight: bold;
	}
	
	.tui-sub-info {
		max-width: 532rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		padding: 20rpx 30rpx 10rpx 30rpx;
		box-sizing: border-box;
		color: #333;
		transform: scale(0.8);
		transform-origin: 100% center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-left: auto
	}
	
	.tui-invalid-text {
		width: 66rpx;
		margin-right: 4rpx;
		text-align: center;
		font-size: 24rpx;
		color: #fff;
		background: rgba(0, 0, 0, .3);
		transform: scale(0.8);
		transform-origin: center center;
		border-radius: 4rpx;
		flex-shrink: 0;
	}
	
	.tui-gray {
		color: #B2B2B2 !important;
	}
	
	.tui-goods-invalid {
		color: #555;
		font-size: 24rpx;
	}
	
	.tui-flex-center {
		align-items: center !important;
	}
	
	.tui-invalid-ptop {
		padding-top: 40rpx;
	}
	
	.tui-tabbar {
		width: 100%;
		height: 130rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		z-index: 999;
	}
	.tui-tabbar::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d9d9d9;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
	
	.tui-checkAll {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.tui-checkbox-pl {
		padding-left: 12rpx;
	}
	.tui-total-price {
		font-size: 32rpx !important;
		padding-top: 10px;
		color: #999999;
	}
	.tui-total-price>.tui-bold{color: #FF0000;}
	.tui-total-price>.line-text{color: #999;text-decoration: line-through;padding-left: 10px;font-size: 13px;}
	.tui-price-box >>> .tui-numbox-icon{
		border-radius: 25px;
		border:2px solid #FF0000;
		color: #FF0000 !important;
		box-sizing: border-box;
		padding: 3px 3px 1px 3px;
		transform: scale(0.7);
	}.tui-price-box >>> .tui-numbox-icon.tui-disabled{
		border-radius: 25px;
		border:2px solid #EEEEEE;
		color: #EEEEEE !important;
		box-sizing: border-box;
		padding: 3px 3px 1px 3px;
		transform: scale(0.7);
	}
	.tui-price-box >>> .tui-numbox-icon.tui-icon-plus{
		border-radius: 25px;
		border:2px solid #FF0000;
		color: #FFF !important;
		background-color: #FF0000;
		box-sizing: border-box;
		padding: 3px 3px 1px 3px;
		transform: scale(0.7);
	}
	/*销售员工*/
	.tui-item-box {
		width: 100%;
		display: flex;
		align-items: center;
	}
	.tui-list-cell_name{font-size: 32upx;}
	.tui-right {
		margin-left: auto;
		margin-right: 34rpx;
		font-size: 26rpx;
		color: #999;
	}
	.leader-box{
		padding: 30upx;
		min-height: 260upx;
	}
	.leader-txt{
		padding: 10upx 20upx;
		margin: 20upx;
		background: #FFF;
		border-radius: 10upx;
		border: 1px solid #e41f19;
		color: #656565;
		float: left;
		display: block;
	}
	.leader-txt.active{
		background-color: #E41F19;
		color: #FFF;
	}
	/**
	 * 补单
	 */
	.rep-order-date{
		margin-left: auto;
		border:1px solid #EEE;
		background-color: #f8f8f8;
		padding: 8upx 20upx;
		min-width: 200upx;
		border-radius: 5px;
	}
	.rep-order-tip{
		padding: 30upx;
		color: #999;
	}
	.rep-order-tip>text{display: inline-block;margin-bottom: 20upx;font-size: 28upx;}
</style>
